<template>
  <div id="panel">
    <el-card class="personnel-dispatch">
      <div class="title-bar">
        <h3>人员调度</h3>
        <el-button type="primary" plain @click="handleAdd">添加人员</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="人员名称" />
        <el-table-column prop="position" label="职务" />
        <el-table-column prop="phone" label="人员电话" />
        <el-table-column prop="dispatchTime" label="调度时间" />
        <el-table-column prop="departureTime" label="出发时间" />
        <el-table-column prop="returnTime" label="返回时间" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row)"
              >详情</el-button
            >
            <el-button type="text" @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新增人员弹框 -->
    <el-dialog
      title="添加人员"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
    >
      <!-- 搜索区域 -->
      <div class="search-bar">
        <el-input
          v-model="searchKey"
          placeholder="请输入姓名、工作单位、联系电话"
          style="width: 200px; margin-right: 10px"
        />
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh-right" @click="handleReset"
          >重置</el-button
        >
        <el-button
          type="primary"
          style="margin-left: 20px"
          @click="handleAddNewPerson"
          >添加人员</el-button
        >
      </div>

      <!-- 表单区域 -->
      <el-form
        :model="form"
        label-width="80px"
        class="form-area"
        style="margin: 20px 0"
      >
        <el-form-item label="事件名称">
          <el-select
            v-model="form.eventName"
            placeholder="请选择事件名称"
            style="width: 100%"
          >
            <el-option
              label="2024年12月11日汤营超桥"
              value="2024年12月11日汤营超桥"
            ></el-option>
            <el-option
              label="2024年12月12日某工程项目"
              value="2024年12月12日某工程项目"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="调度时间">
          <el-date-picker
            v-model="form.dispatchTime"
            type="datetime"
            placeholder="请选择调度时间"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="出发时间">
          <el-date-picker
            v-model="form.departureTime"
            type="datetime"
            placeholder="请选择出发时间"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item label="返回时间">
          <el-date-picker
            v-model="form.returnTime"
            type="datetime"
            placeholder="请选择返回时间"
            style="width: 100%"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
      </el-form>

      <!-- 人员列表 -->
      <el-table
        ref="personTable"
        :data="personList"
        border
        style="width: 100%"
        max-height="300"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="姓名" width="120"></el-table-column>
        <el-table-column
          prop="phone"
          label="联系电话"
          width="150"
        ></el-table-column>
        <el-table-column prop="unit" label="单位"></el-table-column>
      </el-table>

      <!-- 弹框底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "PersonnelDispatch",
  data() {
    return {
      // 弹框控制
      dialogVisible: false,
      // 搜索关键词
      searchKey: "",
      // 表单数据
      form: {
        eventName: "",
        dispatchTime: "",
        departureTime: "",
        returnTime: "",
      },
      // 可选人员列表（模拟数据）
      personList: [
        { name: "陈琳海", phone: "13523516325", unit: "技术部" },
        { name: "王岩松", phone: "66331940", unit: "工程部" },
        { name: "付志伟", phone: "66331956", unit: "项目部" },
        { name: "李小明", phone: "13800138000", unit: "技术部" },
        { name: "张晓华", phone: "13912345678", unit: "财务部" },
        { name: "赵伟强", phone: "66331978", unit: "工程部" },
      ],
      // 调度人员表格数据
      tableData: [
        {
          name: "",
          position: "",
          phone: "",
          dispatchTime: "",
          departureTime: "",
          returnTime: "",
        },
        {
          name: "",
          position: "",
          phone: "",
          dispatchTime: "",
          departureTime: "",
          returnTime: "",
        },
        {
          name: "",
          position: "",
          phone: "",
          dispatchTime: "",
          departureTime: "",
          returnTime: "",
        },
      ],
    };
  },
  methods: {
    // 打开添加人员弹框
    handleAdd() {
      // 重置表单和搜索
      this.form = {
        eventName: "",
        dispatchTime: "",
        departureTime: "",
        returnTime: "",
      };
      this.searchKey = "";
      // 清空表格选中状态
      if (this.$refs.personTable) {
        this.$refs.personTable.clearSelection();
      }
      // 显示弹框
      this.dialogVisible = true;
    },

    // 搜索人员
    handleSearch() {
      if (!this.searchKey) {
        // 关键词为空时显示全部
        this.personList = [
          { name: "陈琳海", phone: "13523516325", unit: "技术部" },
          { name: "王岩松", phone: "66331940", unit: "工程部" },
          { name: "付志伟", phone: "66331956", unit: "项目部" },
          { name: "李小明", phone: "13800138000", unit: "技术部" },
          { name: "张晓华", phone: "13912345678", unit: "财务部" },
          { name: "赵伟强", phone: "66331978", unit: "工程部" },
        ];
        return;
      }

      // 模糊搜索（匹配姓名、电话、单位）
      const key = this.searchKey.toLowerCase();
      this.personList = [
        { name: "陈琳海", phone: "13523516325", unit: "技术部" },
        { name: "王岩松", phone: "66331940", unit: "工程部" },
        { name: "付志伟", phone: "66331956", unit: "项目部" },
        { name: "李小明", phone: "13800138000", unit: "技术部" },
        { name: "张晓华", phone: "13912345678", unit: "财务部" },
        { name: "赵伟强", phone: "66331978", unit: "工程部" },
      ].filter(
        (item) =>
          item.name.toLowerCase().includes(key) ||
          item.phone.includes(key) ||
          item.unit.toLowerCase().includes(key)
      );
    },

    // 重置搜索
    handleReset() {
      this.searchKey = "";
      this.handleSearch();
    },

    // 手动添加人员（可扩展为打开新弹框添加）
    handleAddNewPerson() {
      this.$message.info("可扩展为打开新弹框手动添加人员信息");
      // 实际项目中可在此处打开新弹框，录入人员姓名、电话、单位等信息
    },

    // 确认添加调度人员
    handleConfirm() {
      // 1. 校验表单
      if (!this.form.eventName) {
        this.$message.error("请选择事件名称");
        return;
      }
      if (!this.form.dispatchTime) {
        this.$message.error("请选择调度时间");
        return;
      }
      if (!this.form.departureTime) {
        this.$message.error("请选择出发时间");
        return;
      }
      if (!this.form.returnTime) {
        this.$message.error("请选择返回时间");
        return;
      }

      // 2. 获取选中的人员
      const selectedPersons = this.$refs.personTable.selection;
      if (selectedPersons.length === 0) {
        this.$message.error("请选择至少一名人员");
        return;
      }

      // 3. 处理数据，添加到调度表格
      const newDispatchData = selectedPersons.map((person) => ({
        name: person.name,
        position: person.unit, // 这里用单位代替职务，实际项目可根据需求调整
        phone: person.phone,
        dispatchTime: this.form.dispatchTime,
        departureTime: this.form.departureTime,
        returnTime: this.form.returnTime,
      }));

      // 合并到原表格数据（也可替换空数据）
      this.tableData = [
        ...this.tableData.filter((item) => item.name),
        ...newDispatchData,
      ];

      // 4. 提示成功并关闭弹框
      this.$message.success("人员调度添加成功");
      this.dialogVisible = false;
    },

    // 查看详情
    handleDetail(row) {
      console.log("查看人员详情：", row);
      this.$message.info(`查看${row.name || "未知人员"}的详情`);
    },

    // 删除人员
    handleDelete(row) {
      console.log("删除人员：", row);
      this.tableData = this.tableData.filter((item) => item !== row);
      this.$message.success("人员删除成功");
    },
  },
};
</script>

<style lang="scss" scoped>
#panel {
  padding: 10px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 20px);
}

.personnel-dispatch {
  background-color: #fff;
  padding: 15px;

  .title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }

    .el-button {
      background-color: #606266;
      border-color: #606266;
      color: #fff;

      &:hover {
        background-color: #409eff;
        border-color: #409eff;
        color: #fff;
      }
    }
  }

  .el-table {
    margin-top: 0;
    --el-table-header-text-color: #333;
    --el-table-row-hover-bg-color: #fafafa;
  }
}

// 弹框样式
.search-bar {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  flex-wrap: wrap;
  gap: 10px;
}

.form-area {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 2%;

  .el-form-item {
    width: 48%;
    margin-bottom: 0;

    .el-select,
    .el-date-picker {
      width: 100%;
    }
  }
}

.dialog-footer {
  text-align: right;
  margin-top: 10px;
}

// 适配小屏幕
@media (max-width: 768px) {
  .el-dialog {
    width: 95% !important;
  }

  .form-area .el-form-item {
    width: 100%;
  }

  .search-bar {
    flex-direction: column;
    align-items: stretch !important;

    .el-input {
      width: 100% !important;
      margin-right: 0 !important;
    }
  }
}
</style>
